import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '安全区域组件',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: Scaffold(
        body: SafeAreaContent(),
      ),
    );
  }
}

// 适配异形屏、刘海屏，让内容只在安全区域显示
// 使用SafeArea组件，向上滚动时还是略过安全区域，要做到向上滚动要经过SafeArea
// 需要在CustomScrollView使用SliverSafeArea
class SafeAreaContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ListView(
        children: [
          Container(
            width: double.infinity,
            height: 500,
            color: Colors.red,
          ),
          Container(
            width: double.infinity,
            height: 500,
            color: Colors.yellowAccent,
          ),
          Container(
            width: double.infinity,
            height: 500,
            color: Colors.blue,
          ),
          Container(
            width: double.infinity,
            height: 500,
            color: Colors.green,
          ),
          Container(
            width: double.infinity,
            height: 500,
            color: Colors.pink,
          ),
        ],
      ),
    );
  }
}
